<template>
    <rx-layout>
        <template v-slot:center>
            <div class="Transfer-center">
                <div style="margin-bottom: 0.5rem" v-for="(time,index) in particularsList" :key="index">
                    <ul class="theCirculation-list">
                        <li>
                            <span>{{i18n('transfer','流转人')}}:</span>
                            <span>{{time.fullName}}</span>
                        </li>
                        <li>
                            <span>{{i18n('transTime','流转时间')}}:</span>
                            <span>{{time.createTime}}</span>
                        </li>
                        <li>
                            <span>{{i18n('status','状态')}}:</span>
                            <span :style="{'color':statusMap[time.status].color}">{{statusMap[time.status].text}}</span>
                        </li>
                    </ul>
                    <div class="theCirculationParticulars-list-opinion"><span>{{i18n('transOpinions','流转意见')}}:</span><span>{{time.remark}}</span></div>
                </div>
            </div>

        </template>
        <template v-slot:footer>
            <div class="bpm-footer">
                <div @click="closeWindow" class="bpm-footer-close">{{ $ti18('rxForm.cancelBtn', '取消') }}</div>
                <div @click="onOk" class="bpm-footer-ok">{{ $ti18('rxForm.okBtn', '确定') }}</div>
            </div>
        </template>
    </rx-layout>
</template>

<script>
import RxLayout from '@/components/RxLayout'
import BpmtaskApi from '@/api/rxBpm/bpmTask'
import UserApi from '@/api/userApi';

export default {
    name: "BpmTaskRoamTransferDetail",
    data() {
        return {
            taskId:"",
            particularsList:[],
            statusMap: {
                "UNHANDLE": { color: 'red', text: this.i18n('unprocessed','未处理') },
                "COMPLETED": { color: 'green', text: this.i18n('processed','已处理') },
                "HANDLE": { color: 'red', text: this.i18n('circulation','正在流转') }
            }
        }
    },
    components: {
        RxLayout
    },
    onLoad(option) {
        this.taskId = option.taskId;
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmLang", key);
        },
        init() {
            BpmtaskApi.getRoamTasks(this.taskId).then(res=>{
                if(res.success){
                    this.particularsList = res.data;
                    this.particularsList.filter(res=>{
                        this.userget(res);
                        return res
                    })
                }
            })
        },
        async userget(time){
            await UserApi.OsUsergetById(time.assignee).then(res=>{
                this.$set(time,'fullName',res.fullName)
            })
        },
        onOk() {

        },
        closeWindow() {
            uni.navigateBack({
                delta: 1
            })
        },
    }
}
</script>

<style scoped>
.Transfer-center{
    background: white;
    border-radius: 5px;
    padding: 0.5rem;
}
.Transfer-textarea {
    font-size: 0.8rem;
    height: 124px;
    width: calc(100% - 1rem) !important;
    margin-top: 15px;
    border-radius: 8px;
    border: 1px solid rgba(232, 232, 232, 1);
    padding: 10px 10px 10px 10px;
}
.Transfer-number{
    border-radius: 8px;
    border: 1px solid rgba(232, 232, 232, 1);
    width: 4rem;
    padding: 0px 0.5rem;
    margin-top: 0.25rem;
    margin-right: 0.25rem;
}
.bpm-footer {
    display: flex;
    grid-gap: 10px;
}

.bpm-footer-close {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.65);
}

.bpm-footer-ok {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(66, 133, 244, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: white;
}
.bpm-REQUIRED::after{
    content:'*';
    color: red;
    position: absolute;
    left: 0.7rem;
}
</style>
